<template>
<div class="log">
     
    <div class="logbox">
        <div class="title">{{$t("title")}}</div>
 <el-form :model="ruleForm" status-icon label-width="80px" ref="ruleForm"  :rules="rules" class="formn" :label-position="labelPosition">
  <el-form-item :label="$t('login.name')" prop="username">
        <el-input :placeholder="$t('login.pl')+$t('login.name')" v-model.trim="ruleForm.username" ></el-input>
  </el-form-item>
  <el-form-item :label="$t('login.pw')"   prop="pw">
    <el-input  v-model.trim="ruleForm.pw" :placeholder="$t('login.pl')+$t('login.pw')" show-password></el-input>  
    </el-form-item>
    <el-form-item>
        
    <el-button type="primary" :disabled="disabled" @click="submitForm(ruleForm)" class="sub" :loading="goIndex">{{$t("login.log")}}</el-button>
  
  </el-form-item>
</el-form>   


<div class="langchoose" >
    <el-dropdown  @command="handleCommand">
      <span class="el-dropdown-link">
       {{lang?lang:"语言选择"}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item  command="English">English</el-dropdown-item>
        <el-dropdown-item  command="简体中文">简体中文</el-dropdown-item>
        <el-dropdown-item  command="繁体中文">繁体中文</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
</div>

    </div>
    
</div> 

</template>

<script>
import { login } from "../Util/request";

export default {
    data(){
     let validatepw = (rule, value, callback) => {
        if (value === '') {
          callback(new Error(this.$t('login.pl')+this.$t('login.pw')));
        }  else {
          callback();
        }
      };

     let validatename = (rule, value, callback) => {
        if (value === '') {
          callback(new Error(this.$t('login.pl')+this.$t('login.name')));
        }  else {
          callback();
        }
      };


        return{
        change:true,
        labelPosition:"left",
        ruleForm: {
          username: '',
          pw: '',
         
        },
        pw:'',
        username:"",
        lang:null,
         rules: {
          username: [
            { validator: validatename, trigger: 'blur' }
          ],
          pw: [
            { validator: validatepw, trigger: 'blur' }
          ],
        },
        goIndex:false,
        disabled:true
        }
        

    },
    methods: {
        submitForm(e){
            // console.log(this.ruleForm);
            // if(e.username=="admin"&&e.pw=="123456"){
            //     sessionStorage.setItem("token","success")
            //     this.$router.push("/home")
              
            // }else{
            //       this.$message({
            //          message: this.$t("login.faild"),
            //          type:"error",
            //          duration:2000
            //          }
            //           );   
            // }  
            login( async (res)=>{
             this.goIndex=true
            
                if(res.code==200){
                  this.goIndex=false
                  this.$store.commit("changeadminId",res.data.adminId)
                  this.$store.commit("changetoken",res.data.token)
                  localStorage.setItem("token",res.data.token)                 
                  this.$router.push("/home")
                }else{
                  this.goIndex=false
                  this.ruleForm.pw=null
                  this.$message.error(res.msg);
                }
            
            },e.username,e.pw)
           
            
        },
        handleCommand(e){
          switch (e) {
              case "English":
                 this.lang=e 
                 this.$i18n.locale="en"
                 localStorage.setItem("language","en")
                  break;
              case "简体中文":
                 this.lang=e 
                 this.$i18n.locale="cn"
                   localStorage.setItem("language","cn")
                  break;
              case "繁体中文":
                 this.lang=e 
                 this.$i18n.locale="cnTW"
                   localStorage.setItem("language","cnTW")
                  break;
              default:
                  this.lang=null
                  break;
          }

        }
    },
    watch:{
      ruleForm:{
        handler(n){
          for(let i  in n){
            if(!n[i]){
              this.disabled=true
              return
            }else{
              this.disabled=false
            }
          }
        },
        deep:true
      }
    }
}
</script>

<style lang="less" >
.log{
    position: relative;
    width: 100%;
    height: 100vh;
    background: url(../assets/bg.png)  no-repeat;
    background-size: 100% 100%;
    .logbox{
        position: fixed;     
        right: 0;
        top: 0;        
        width: 40vw;
        height: 100vh;
        .title{
            margin-top:  100px;
            width: 100%;
            text-align: center;
            font-size: 3vh ;
            color: #000;
        }
        .formn{
            margin-top: 10vh;
            width: 100%;
          .el-form-item{
              width: 70%;
              margin: 0 auto;
              margin-bottom: 5vh;
              height: 5vh;
             /deep/ .el-form-item__label{
                  font-size: 30px;
              }
              .sub{
                  width: 100%;
                  border-radius: 1000px;
              }
          }
        }
        .langchoose{
            position: absolute;
            left: 50px;
            top: 48.5vh;
            display: flex;
            flex-direction: column;
        }
   
    }
}
.el-message .el-icon-error{
    font-size: 20%;
}
@media screen and (max-width: 750px) {

}
</style>